<template>
  <el-card>
    <div class="header">
      <h2>会议室信息列表</h2>
      <el-dropdown>
        <el-button type="primary">
          <el-icon><Plus /></el-icon>会议室操作
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="dialogVisible = true">快速添加会议室</el-dropdown-item>
            <el-dropdown-item @click="navigateToAddPage">前往添加页面</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 添加加载状态和空状态 -->
    <el-skeleton :rows="5" animated v-if="loading" />
    <template v-else>
      <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          empty-text="暂无会议室数据"
      >
        <el-table-column prop="garden" label="园区" />
        <el-table-column prop="buildNum" label="楼号" />
        <el-table-column prop="roomNum" label="房间号" />
        <el-table-column prop="bedNum" label="容纳人数" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? '可用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="editRoom(scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="toggleStatus(scope.row)"
            >
              {{ scope.row.status ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 添加/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑会议室' : '添加会议室'">
      <el-form :model="form" label-width="100px">
        <el-form-item label="园区">
          <el-input v-model="form.garden" />
        </el-form-item>
        <el-form-item label="楼号">
          <el-input v-model="form.buildNum" />
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.roomNum" />
        </el-form-item>
        <el-form-item label="容纳人数">
          <el-input-number v-model="form.bedNum" :min="1" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" active-text="可用" inactive-text="禁用" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRoom">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

interface Room {
  id?: number
  garden: string
  buildNum: string
  roomNum: string
  bedNum: number
  status: boolean
}

const router = useRouter()
const tableData = ref<Room[]>([])
const loading = ref(true) // 添加加载状态
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = ref<Room>({
  garden: '',
  buildNum: '',
  roomNum: '',
  bedNum: 10,
  status: true
})

onMounted(() => {
  loadRooms()
})

const loadRooms = () => {
  loading.value = true
  // 模拟API请求延迟
  setTimeout(() => {
    // 生成30个会议室数据（与其他文件格式一致）
    tableData.value = Array.from({length: 30}, (_, i) => {
      const buildingIndex = i % 7;
      const building = String.fromCharCode(65 + buildingIndex); // A-G
      const floor = Math.floor(i / 7) + 1;
      const roomNum = 100 + (i % 20);

      return {
        id: i + 1,
        garden: `${building}区`,
        buildNum: `${building}${floor}`,
        roomNum: `${roomNum}`,
        bedNum: Math.floor(Math.random() * 30) + 10, // 10-40人
        status: Math.random() > 0.3 // 70%可用
      };
    });
    loading.value = false
  }, 500)
}

const editRoom = (room: Room) => {
  form.value = { ...room }
  isEdit.value = true
  dialogVisible.value = true
}

const toggleStatus = (room: Room) => {
  room.status = !room.status
  ElMessage.success(`会议室已${room.status ? '启用' : '禁用'}`)
}

const saveRoom = () => {
  if (isEdit.value) {
    const index = tableData.value.findIndex(r => r.id === form.value.id)
    if (index !== -1) {
      tableData.value[index] = { ...form.value }
    }
    ElMessage.success('会议室信息已更新')
  } else {
    form.value.id = Date.now()
    tableData.value.push({ ...form.value })
    ElMessage.success('会议室添加成功')
  }
  dialogVisible.value = false
  resetForm()
}

const resetForm = () => {
  form.value = {
    garden: '',
    buildNum: '',
    roomNum: '',
    bedNum: 10,
    status: true
  }
  isEdit.value = false
}

const navigateToAddPage = () => {
  router.push('/house/add')
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>